<template>
  <div>
    <header>
      <div>
        <img :src="imgHead" alt class="headIMG" />
        更换头像
      </div>
      <div class="header_right">
        <ul class="upload-imgs">
          <li v-if="imgLen>=4 ? false : true">
            <input
              type="file"
              class="upload"
              @change="addImg"
              ref="inputer"
              
              multiple
              accept="image/png, image/jpeg,image/jpg"
            />
            <a class="add">
              <i class="iconfont icon-plus"></i>
              <p>点击上传</p>
            </a>
          </li>
          <!-- <li v-for="(value, key) in imgs" :key="key">
            <p class="img">
              <img :src="getObjectURL(value)" />
              <a class="close" @click="delImg(key)">×</a>
            </p>
          </li>-->
        </ul>
        <img src="../assets/ic_change.png" alt />
      </div>
    </header>
    <div class="changeList_item">
      <div>性别：</div>
      <div class="radio">
        <img v-if="sexType!=0" @click="radioBtn(0)" src="../assets/ic_sex_default.png" alt />
        <img v-else @click="radioBtn(1)" src="../assets/ic_sexEd.png" alt />
        <div style="margin-right:24.5px;">男</div>
        <img v-if="sexType!=1" @click="radioBtn(1)" src="../assets/ic_sex_default.png" alt />
        <img v-else @click="radioBtn(0)" src="../assets/ic_sexEd.png" alt />
        <div>女</div>
      </div>
    </div>
    <div class="changeList_item">
      <div>日期：</div>
      <div class="radio">
        <group>
          <calendar v-model="date" title></calendar>
        </group>
      </div>
    </div>
    <div class="changeList_item">
      <div>身高：</div>
      <div class="radio">
        <input class="cmInput" v-model="userHeight" type="text" placeholder="请输入身高/" />
        <span>cm</span>
      </div>
    </div>
    <div class="changeList_item">
      <div style="display:flex">
        <div>验证码：</div>
        <input style="color:#999;" type="number" v-model="code" placeholder="请输入验证码" />
      </div>
      <div
        class="getCode getCode_default"
        style="border:1px  solid #ccc;color:#ccc"
        v-if="canClickVerifyButton"
      >{{verifyMessage}}</div>
      <div class="getCode" @click="getCode" v-else>{{verifyMessage}}</div>
    </div>
    <div class="subBtn" @click="subBtn">保 存</div>
  </div>
</template>
<script>
import * as API from "@/http/common/api";
import { Calendar, Group, PopupPicker } from "vux";
export default {
  name: "changeMessage",
  data() {
    return {
      sexType: 0, //0 男  1女
      canClickVerifyButton: false, //能发送信息状态   不能false
      verifyMessage: "获取验证码",
      date: "2000-01-01",
      cm: "175",
      files: [], //
      userInfo: {},
      userHeight: null,
      code: null,
      dataT: {
        avatar: ""
      },
      imgHead: null,
      //
      formData: new FormData(),
      imgs: {},
      imgLen: 0
    };
  },
  methods: {
    addImg() {
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      this.fil = inputDOM.files;
      let oldLen = this.imgLen;
      let len = this.fil.length + oldLen;
      if (len > 1) {
        // alert("最多可上传1张");
        return false;
      }
      for (let i = 0; i < this.fil.length; i++) {
        let size = Math.floor(this.fil[i].size / 1024);
        if (size > 5 * 1024 * 1024) {
          // alert("请选择5M以内的图片！");
          return false;
        }
        this.imgLen++;
        this.$set(
          this.imgs,
          this.fil[i].name + "?" + new Date().getTime() + i,
          this.fil[i]
        );
      }
      this.submit();
    },
    submit() {
      for (let key in this.imgs) {
        let name = key.split("?")[0];
        this.formData.append("file", this.imgs[key], name);
      }
      this.$http(API.uploadUserUuid, {
        type: "POST",
        params: this.formData
      })
        .then(res => {
          this.imgHead = res.data.url;
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    radioBtn(e) {
      this.sexType = e;
    },
    // vant
    //获取验证码
    getCode() {
      var that = this;
      this.$http(API.GET_SMS, {
        type: "GET",
        params: { mobile: this.userInfo.accountNumber }
      }).then(res => {
        console.log(res);
        this.$vux.loading.hide();
        this.$vux.toast.show({
          text: "发送验证码成功",
          type: "text"
        });
        //倒计时
        var time = 60;
        (this.verifyMessage = time + "s"), (this.canClickVerifyButton = true);
        that.timer = setInterval(() => {
          time--;
          if (time == 1 || time < 0) {
            that.timer && clearInterval(that.timer);
            this.verifyMessage = "获取验证码";
            this.canClickVerifyButton = false;
            return;
          }
          (that.verifyMessage = time + "s"), (that.canClickVerifyButton = true);
        }, 1000);
      });
      that.canClickVerifyButton = true;
    },
    //修改信息提交
    subBtn() {
      if (!this.code) {
        this.$vux.toast.show({ text: "验证码为空", type: "text" });
        return
      }
      this.$http(API.updateMyMessage, {
        type: "POST",
        params: {
          mobile: this.userInfo.accountNumber,
          mobileCode: this.code,
          userId: this.userInfo.userId,
          userSex: this.sexType == 0 ? "男" : "女",
          birthday: this.date,
          height: this.userHeight,
          userUuid: this.imgHead,
          username:this.userInfo.username,
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.$router.push({ name: "My", params: {} });
        } else {
          this.$vux.toast.show({
            text: res.data.message,
            type: "text"
          });
        }
      });
    }
  },
  beforeCreate() {},
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    console.log(JSON.parse(this.$localStorage.get("userInfo")));
    this.date = this.userInfo.birthday.slice(0, 10);
    this.userHeight = this.userInfo.height;
    this.imgHead = this.userInfo.userUuid;
    this.sexType = this.userInfo.userSex == "男" ? 0 : 1;
  },
  components: {
    Group,
    Calendar,
    PopupPicker
  }
};
</script>
<style scoped lang='less'>
header {
  display: flex;
  background: #fff;
  border-top: 1px solid #eee !important;
  border-bottom: 1px solid #eee !important;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  height: 60px;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
  }
  div {
    display: flex;
    align-items: center;
    font-size: 15px;
    img {
      width: 44px;
      height: 44px;
      margin-right: 9.5px;
    }
  }
}
.changeList_item {
  display: flex;
  justify-content: space-between;
  height: 60px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 15px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #eee;
  .radio {
    display: flex;
    font-size: 13px;
    color: #999;
    align-items: center;
    img {
      width: 12px;
      height: 12px;
      margin-right: 9.5px;
    }
  }
}
.changeList_item:last-child {
  border: none;
}
.radio /deep/ .weui-cells {
  margin-top: 0;
}
.radio /deep/ .weui-cells:before,
.weui-cells:after {
  height: 0;
  border: none;
}
.radio /deep/ .vux-calendar:before {
  height: 0;
  border: none;
}
.radio /deep/ .weui-cells:after {
  height: 0;
  border: none;
}
.radio /deep/ .weui-cell {
  padding: 0;
}
.radio /deep/ .weui-cells:before {
  border: none;
}
.cmInput {
  text-align: right;
  margin-right: 2px;
  color: #999;
  font-size: 14px;
}
.getCode {
  width: 75px;
  height: 28px;
  border-radius: 7.5px;
  background: rgb(229, 229, 229);
  line-height: 28px;
  text-align: center;
  font-size: 12px;
}
.subBtn {
  width: 343.5px;
  height: 40px;
  text-align: center;
  margin: 0 auto;
  background: #e83263;
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  border-radius: 7.5px;
  margin-top: 19.5px;
}
// 验证码
.getCode {
  text-align: center;
  border-radius: 13px;
  background: #e83263;
  color: #fff;
  font-size: 13px;
  padding: 0px 5.5px;
}
.getCode_default {
  border: #e83263;
  background: #fff;
}
.uploader {
  display: flex;
  background: #e83263;
  width: 18px;
  height: 18px;
  overflow: hidden;
  opacity: 0;
  background-image: url("../assets/ic_change.png");
  position: absolute;
  left: 0;
  top: 0;
}
.header_right {
  display: flex;
  position: relative;
}
.header_right > img {
  width: 18px;
  height: 18px;
  border: none;
}
.headIMG {
  border-radius: 50%;
}
.upload-imgs {
  width: 18px;
  height: 18px;
  overflow: hidden;
  margin-right: -18px;
  opacity: 0;
}

</style>
